<template>
	<view class="page">
		<!-- 搜索栏和统计 - 粘性布局 -->
		<view class="sticky-header">
			<view class="search-container">
				<view class="search-box">
					<image src="/static/svg/search.svg" class="search-icon" />
					<input 
						type="text" 
						placeholder="搜索关注的用户..." 
						class="search-input"
						v-model="searchKeyword"
						@input="handleSearch"
					/>
				</view>
			</view>
			<view class="stats-bar">
				<text class="stats-text">共关注了 {{ followList.length }} 位用户</text>
			</view>
		</view>

		<!-- 关注列表 -->
		<view class="follow-list">
			<view 
				v-for="user in filteredFollowList" 
				:key="user.id"
				class="follow-item"
				@click="viewUserProfile(user)"
			>
				<view class="user-info">
					<image :src="user.avatar" class="user-avatar" />
					<view class="user-detail">
						<text class="user-name">{{ user.name }}</text>
						<text class="user-desc">{{ user.description }}</text>
						<view class="user-stats">
							<text class="stats-item">粉丝 {{ user.followers }}</text>
							<text class="stats-item">·</text>
							<text class="stats-item">{{ user.lastActive }}</text>
						</view>
					</view>
				</view>
				<view class="action-buttons">
					<button 
						class="unfollow-btn"
						@click.stop="unfollowUser(user)"
					>
						取消关注
					</button>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view v-if="hasMore && !loading" class="load-more" @click="loadMore">
				<text class="load-more-text">点击加载更多</text>
			</view>
			
			<!-- 加载中 -->
			<view v-if="loading" class="loading">
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 没有更多 -->
			<view v-if="!hasMore && followList.length > 0" class="no-more">
				<text class="no-more-text">没有更多了</text>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="filteredFollowList.length === 0" class="empty-state">
			<image src="/static/svg/user.svg" class="empty-icon" />
			<text class="empty-title">{{ searchKeyword ? '没有找到相关用户' : '还没有关注任何人' }}</text>
			<text class="empty-desc">{{ searchKeyword ? '试试其他关键词' : '快去发现感兴趣的用户吧' }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const searchKeyword = ref('');
const followList = ref([]);
const loading = ref(false);
const hasMore = ref(true);
const currentPage = ref(1);
const pageSize = 10;

// 生成模拟用户数据的函数
const generateMockUsers = (page, size) => {
	const names = ['张小花', '李运动', '王美食', '赵旅行', '刘读书', '陈艺术', '吴科技', '周音乐', '郑健康', '孙时尚',
		'钱摄影', '徐美妆', '朱游戏', '林电影', '何书法', '黄舞蹈', '罗编程', '高设计', '梁烹饪', '宋园艺'];
	const descriptions = [
		'热爱摄影，记录生活中的美好瞬间 📸',
		'健身达人，每天坚持运动💪',
		'美食博主，分享各种美味佳肴🍴',
		'旅行爱好者，足迹遍布世界各地🌍',
		'书虫一枚，喜欢分享读书心得📚',
		'艺术创作者，用画笔描绘世界🎨',
		'科技极客，关注最新科技动态💻',
		'音乐制作人，创作动听旋律🎵',
		'健康生活倡导者，分享养生秘诀🌱',
		'时尚达人，引领潮流风向👗',
		'专业摄影师，捕捉精彩瞬间📷',
		'美妆博主，分享变美秘籍💄',
		'游戏主播，带你畅游虚拟世界🎮',
		'电影评论家，解读光影艺术🎬',
		'书法家，传承中华文化✍️',
		'舞蹈老师，用身体诠释美💃',
		'程序员，用代码改变世界👨‍💻',
		'设计师，创造美好视觉体验🎯',
		'烹饪达人，制作美味佳肴👨‍🍳',
		'园艺爱好者，打造绿色生活🌸'
	];
	const avatars = ['/static/svg/avatar-female.svg', '/static/svg/avatar-male.svg'];
	const activeTime = ['2小时前', '5小时前', '1天前', '3天前', '6小时前', '12小时前', '2天前', '4天前', '1周前'];
	
	const users = [];
	const startId = (page - 1) * size + 1;
	
	for (let i = 0; i < size; i++) {
		const id = startId + i;
		if (id > 100) break; // 模拟总共100个用户
		
		users.push({
			id,
			name: names[Math.floor(Math.random() * names.length)] + id,
			avatar: avatars[Math.floor(Math.random() * avatars.length)],
			description: descriptions[Math.floor(Math.random() * descriptions.length)],
			followers: (Math.floor(Math.random() * 50) / 10 + 0.1).toFixed(1) + 'k',
			lastActive: activeTime[Math.floor(Math.random() * activeTime.length)]
		});
	}
	
	return users;
};

// 过滤关注列表
const filteredFollowList = computed(() => {
	if (!searchKeyword.value) {
		return followList.value;
	}
	return followList.value.filter(user => 
		user.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
		user.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
	);
});

// 处理搜索
const handleSearch = () => {
	// 实际项目中这里可以调用搜索API
	console.log('搜索关键词:', searchKeyword.value);
};

// 查看用户详情
const viewUserProfile = (user) => {
	uni.showToast({
		title: `查看${user.name}的详情`,
		icon: 'none'
	});
	// 实际项目中这里跳转到用户详情页
	// uni.navigateTo({
	//     url: `/pages/user/profile?userId=${user.id}`
	// });
};

// 加载关注列表数据
const loadFollowList = async (page = 1) => {
	loading.value = true;
	
	try {
		// 模拟网络请求延迟
		await new Promise(resolve => setTimeout(resolve, 1000));
		
		const newUsers = generateMockUsers(page, pageSize);
		
		if (page === 1) {
			followList.value = newUsers;
		} else {
			followList.value = [...followList.value, ...newUsers];
		}
		
		// 检查是否还有更多数据
		hasMore.value = newUsers.length === pageSize && followList.value.length < 100;
		
	} catch (error) {
		uni.showToast({
			title: '加载失败',
			icon: 'error'
		});
	} finally {
		loading.value = false;
	}
};

// 加载更多
const loadMore = () => {
	if (loading.value || !hasMore.value) return;
	
	currentPage.value++;
	loadFollowList(currentPage.value);
};

// 取消关注用户
const unfollowUser = (user) => {
	uni.showModal({
		title: '确认取消关注',
		content: `确定要取消关注"${user.name}"吗？`,
		success: (res) => {
			if (res.confirm) {
				// 从关注列表中移除
				const index = followList.value.findIndex(item => item.id === user.id);
				if (index > -1) {
					followList.value.splice(index, 1);
					uni.showToast({
						title: '已取消关注',
						icon: 'success'
					});
				}
			}
		}
	});
};

onMounted(() => {
	// 初始加载数据
	loadFollowList(1);
});
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
}

/* 粘性头部 */
.sticky-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: white;
	border-bottom: 1px solid #f0f0f0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 搜索栏 */
.search-container {
	padding: 20px;
}

.search-box {
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 20px;
	padding: 12px 16px;
}

.search-icon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	filter: opacity(0.5);
}

.search-input {
	flex: 1;
	font-size: 16px;
	border: none;
	background: transparent;
	outline: none;
}

/* 统计栏 */
.stats-bar {
	padding: 0 20px 15px 20px;
}

.stats-text {
	font-size: 14px;
	color: #666;
}

/* 关注列表 */
.follow-list {
	background: white;
}

.follow-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #f8f9fa;
	transition: background-color 0.2s;
}

.follow-item:active {
	background: #f8f9fa;
}

.follow-item:last-child {
	border-bottom: none;
}

.user-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.user-avatar {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	margin-right: 15px;
	background: #f0f0f0;
}

.user-detail {
	flex: 1;
}

.user-name {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.user-desc {
	font-size: 14px;
	color: #666;
	display: block;
	margin-bottom: 8px;
	line-height: 1.4;
}

.user-stats {
	display: flex;
	align-items: center;
}

.stats-item {
	font-size: 12px;
	color: #999;
	margin-right: 8px;
}

.action-buttons {
	margin-left: 8px;
}

.unfollow-btn {
	background: #f8f9fa;
	color: #666;
	border: 1px solid #e9ecef;
	border-radius: 12px;
	padding: 4px 8px;
	font-size: 11px;
	transition: all 0.2s;
	min-width: auto;
}

.unfollow-btn:active {
	background: #e9ecef;
	transform: scale(0.95);
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80px 20px;
}

.empty-icon {
	width: 80px;
	height: 80px;
	margin-bottom: 20px;
	filter: opacity(0.3);
}

.empty-title {
	font-size: 18px;
	color: #666;
	display: block;
	margin-bottom: 10px;
}

.empty-desc {
	font-size: 14px;
	color: #999;
	display: block;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: 20px;
	background: white;
}

.load-more-text {
	color: #007aff;
	font-size: 16px;
}

.load-more:active {
	background: #f8f9fa;
}

/* 加载中 */
.loading {
	text-align: center;
	padding: 20px;
	background: white;
}

.loading-text {
	color: #666;
	font-size: 14px;
}

/* 没有更多 */
.no-more {
	text-align: center;
	padding: 20px;
	background: white;
}

.no-more-text {
	color: #999;
	font-size: 14px;
}
</style> 